<script setup lang="ts">
import type { Slot } from 'vue'
import { h, inject } from 'vue'

const props = defineProps<{ column: any }>()

// 注入主表格组件提供的插槽对象
const tableSlots = inject<Record<string, Slot>>('proTableSlots')

// 2. 渲染单元格逻辑 (优先级: render > slot > prop)
function renderCell(scope: any) {
  // A. 如果有 render 函数，直接执行
  if (props.column.render) {
    return () => props.column.render(h, scope)
  }
  // B. 如果有 slot 名称，从注入的插槽中获取并渲染
  if (props.column.slot && tableSlots?.[props.column.slot]) {
    return () => tableSlots[props.column.slot]!(scope)
  }
  // C. 默认渲染文本
  return () => scope.row[props.column.prop]
}

// 根据传入的column，将children属性去除
function omitChildren(column: any) {
  const { children, ...rest } = column
  return rest
}
</script>

<template>
  <el-table-column v-if="column.children && column.children.length" v-bind="omitChildren(column)">
    <TableColumn v-for="child in column.children" :key="child.prop || child.label" :column="child" />
  </el-table-column>

  <el-table-column v-else v-bind="column">
    <template v-if="column.render || column.slot" #default="scope">
      <component :is="renderCell(scope)" />
    </template>
  </el-table-column>
</template>
